<template>
  <div id="app">
    <div class="main">
      <!-- 标题 -->
      <HeaderBar></HeaderBar>
      <!-- 主内容 -->
      <div class="music-content">
        <div class="music-left">
          <FunctionTabs></FunctionTabs>
          <router-view />
        </div>
        <div class="music-right">
          <Lyric />
        </div>
      </div>
      <audio ref="MediaPlayer"></audio>
      <!-- 自定义播放器 -->
      <AudioControl></AudioControl>
    </div>
    <!-- 背景图片和遮罩层 -->
    <div id="mpPlayer-bg" :style="backgroundImage"></div>
    <div id="mpPlayer-mask"></div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import HeaderBar from './components/HeaderBar.vue'
import AudioControl from './components/AudioControl.vue'
import FunctionTabs from './components/FunctionTabs.vue'
import Lyric from '@/components/Lyric.vue'
import { getPlayListDetail } from './api'
import { defaultListId } from '@/config.js'

export default {
  created() {
    getPlayListDetail(defaultListId).then(playlist => {
      const tracks = playlist.tracks.slice(0, 100)
      this.setPlayList(tracks)
      console.log(this.getPlayList)
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.addCurrentTimeListener()
      this.setMediaPlayer(this.$refs.MediaPlayer)
    })
  },
  beforeDestroy() {
    this.removeCurrentTimeListener()
  },
  methods: {
    addCurrentTimeListener() {
      let self = this
      this.$refs.MediaPlayer.addEventListener('timeupdate', myTimeUpdate)
      this.$refs.MediaPlayer.addEventListener('progress', myTimeProgress)
      this.$refs.MediaPlayer.addEventListener('ended', myEnded)

      function myTimeUpdate() {
        self.setCurrentTime(this.currentTime)
      }
      function myTimeProgress() {
        // 获取缓冲时间
        self.setCurrentProgressTime(this.buffered.end(0))
      }
      async function myEnded () {
        // 根据模式切换歌曲
        await self.playNextSong()
      }
    },
    removeCurrentTimeListener() {
      this.$refs.MediaPlayer.removeEventListener('timeupdate')
      this.$refs.MediaPlayer.removeEventListener('progress')
      this.$refs.MediaPlayer.removeEventListener('ended')
    },
    ...mapMutations([
      'setCurrentProgressTime', 
      'setCurrentTime', 
      'setPlayList', 
      'setPlayMusicUrl', 
      'setMediaPlayer'
    ]),
    ...mapActions(['playNextSong'])
  },
  computed: {
    backgroundImage() {
      let cover = this.getCurrentMusic ? this.getCurrentMusic.image : require('./assets/image/background.jpg')
      return {
        backgroundImage: `url(${cover})`
      }
    },
    ...mapGetters(['getPlayList', 'getMusicUrl', 'getCurrentMusic'])
  },
  components: {
    HeaderBar,
    FunctionTabs,
    AudioControl,
    Lyric
  }
}
</script>

<style lang="scss">
  $backgroundImage: './assets/image/background.jpg';

  #app {
    color: $text_color;
    height: 100vh;

    .main {
      margin: 0 auto;
      width: 90vw;
      height: 100vh;

      .music-content {
        display: flex;
        .music-left {
          flex: 1;
        }
        .music-right {
          width: 300px;
        }
      }

      .audioControl {
        width: 70vw;
        height: 8vh;
        margin-top: 20px;
      }
    }
    // 媒体查询
    @media (max-width: 1680px) {
      .main {
        margin: 0 auto;
        width: 96vw;
        height: 100vh;
      }
    }
  }

  // 背景图片和遮罩层
  #mpPlayer-bg, #mpPlayer-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #mpPlayer-bg {
    z-index: -2;
    background: url($backgroundImage) center center no-repeat;
    background-size: cover;
    transition: 0.8s all;
  }

  #mpPlayer-mask {
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.2);
  }
</style>
